<!--好友聊天-->
<template>
  <div class="MainBox w">
    <div class="containBox">
      <personAside></personAside>
      <div class="contain-right">
        <div class="showBox">
          <div class="allBox">
            <personHeader></personHeader>
            <div class="personUserAction">
              <!--我的好友列表-->
              <div class="friendListBox">
                <div class="personUserActionHeader">
                  <span class="headerP1">我的研友</span>
                  <span class="headerP2">My Friend</span>
                  <span class="headerP3">SETTINGS</span>
                </div>
                <div class="friendBoxMain">
                  <div class="friendItem centerLocation redPort" v-for="item in userFridenList" :key="item.userId">
                    <div class="friendItemLeft">
                      <div class="userImg" v-if="item.image === '无'">
                        <img src="../../assets/Img/defaultUserImg.png" alt="">
                      </div>
                      <div class="userImg" v-else>
                        <img :src="[publicUrl + item.image]" alt="">
                      </div>
                      <div class="userName">{{ item.nickname }}</div>
                    </div>
                    <div class="friendItemRight">
                      <div class="lookUserInformation" @click="gotoUserPage(item.userId)">查看信息</div>
                      <div class="openUserChatWindow" @click="showPopupBox(item.userId, item.image, item.nickname)">开启聊天
                      </div>


                    </div>
                    <span class="Port" :class="{ hiddenRedPord: item.isRedSpot === 0 }"></span>
                  </div>
                </div>
                <ChatPopup ref="ChatPopup"></ChatPopup>
              </div>



              <!--搜索列表-->
              <div class="searchFriendBox">
                <div class="personUserActionHeader">
                  <span class="headerP1">我的研友</span>
                  <span class="headerP2">My Friend</span>
                  <span class="headerP3">SETTINGS</span>
                </div>
                <div class="friendBoxSearch">
                  <div class="searchMain">
                    <div class="searchImage" @click="searchFriend">
                      <img src="../../assets/Img/Icon/search.png" alt="">
                    </div>
                    <div class="searchInputBox">
                      <div class="searchInputMain">
                        <input type="text" placeholder="请输入搜索内容" class="inputType" v-model="firendNickName">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="friendBoxSearchList">
                  <div class="friendItem centerLocation" v-for="(item) in searchFridenList" :key="item.userId">
                    <div class="ItemLeft">
                      <div class="userImg" v-if="item.image === '无'">
                        <img src="../../assets/Img/defaultUserImg.png" alt="">
                      </div>
                      <div class="userImg" v-else>
                        <img :src="[publicUrl + item.image]" alt="">
                      </div>
                      <div class="userName">{{ item.nickname }}</div>
                    </div>
                    <div class="ItemRight" @click="addFriend(item.userId, item.isFriend)">
                      添加好友
                    </div>
                  </div>
                </div>
                <addUserFriend ref="addUserFriend"></addUserFriend>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import personAside from '../../components/personCenter/personAside'
import personHeader from '../../components/personCenter/personHeader'
import ChatPopup from '../../components/popUp/ChatPopup'
import addUserFriend from '../../components/popUp/addUserFriend'
import { getFriend, getSearchFriend } from '@/service/userServers'
import { createPublicUrl } from '../../utils/index'
export default {
  data() {
    return {
      userFridenList: [],
      searchFridenList: [],
      firendNickName: '',
      //开启监听的定时器 
      interval: ''
    }
  },
  components: { personAside, personHeader, ChatPopup, addUserFriend },
  name: "teacherReply",
  //根据 
  mounted() {
    //获取用户的相关信息,避免刷新到时头像丢失
    this.$store.dispatch('userInfo/getUserInfo')
    //获取这个用户的好友聊天 
    this.getUserFriend()
    //定时刷新好友列表 
    this.interval = setInterval(() => {
      this.getUserFriend()
    }, 2500)
  },
  //vue2中的这个在vue3中已经被抛弃 
  //eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle 
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    //获取好友列表 
    getUserFriend() {
      getFriend().then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.userFridenList = res.data.data

        }
      })
    },
    //点击时弹出对应的好友聊天框(将好友的图片,ID,昵称都传递到弹窗中使用) 
    showPopupBox(friendUserId, friendImg, friendNickName) {
      //清空定时器 
      clearInterval(this.interval)
      this.interval = null
      this.$refs.ChatPopup.showPopup(friendUserId, friendImg, friendNickName)
    },
    //关闭弹窗写在父组件中,方便后续操作
    closePopupBox() {
      this.getUserFriend()  //再次请求，避免页面未及时刷新
      this.$refs.ChatPopup.closePopup()
      //再次开启定时器 
      this.interval = setInterval(() => {
        this.getUserFriend()
      }, 2500)
    },
    //搜索好友
    searchFriend() {
      let friendName = this.firendNickName
      console.log(friendName.length);
      if (friendName.length === 0) {
        this.$message.error('搜索昵称不能为空')
      } else {
        getSearchFriend(friendName).then((res) => {
          if (res.data.code === 406) {
            this.$message.error(res.data.message)
          } else {
            this.searchFridenList = res.data.data
          }
        })
      }
    },
    //申请添加好友
    addFriend(friendId, isFriend) {
      if (isFriend === 1) {
        this.$message.success('该用户已经是好友了,禁止再次添加')
      } else {
        this.$refs.addUserFriend.showPopup(friendId)
      }
    },
    //前往研友个人中心
    gotoUserPage(userId){
      let location = {name:"otherPerson"}
      location.query = {userId:userId}
      this.$router.push(location)
    }
  },
  computed: {
    //获取公共的url 
    publicUrl() {
      return createPublicUrl()
    }
  },
  watch: {
    $route: {
      handler(route) {
        //表示的是页面进入了好友页面
        //,那么就停止这页面中的监听器,开启对应页面的监听器,监听实时返回 
        if (route.name === 'userChat') {
          //关闭持续请求 
          clearInterval(this.interval)
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang='less' scoped>
.MainBox {
  .containBox {
    margin-top: 70px;
    display: flex;

    .contain-right {
      flex: 3;
    }
  }
}

.personUserAction {
  .friendListBox {
    margin-top: 10px;
    width: 600px;
    border-radius: 10px;
    color: #666;
    border: 2px solid #eee;
    .friendBoxMain {
      margin: 10px 0;
      padding: 0 5px;

      .friendItem {
        margin: 10px 0;
        justify-content: space-between;
        cursor: pointer;
        border-radius: 10px;

        .friendItemLeft {
          display: flex;
          align-items: center;

          .userName {
            margin-left: 10px;
          }
        }

        .friendItemRight {
          display: flex;

          .lookUserInformation,
          .openUserChatWindow {
            margin: 0 5px;
            padding: 0 10px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            color: #ffffff;
            background-color: #4a9efa;
          }
        }

        .hiddenRedPord {
          display: none !important;
        }
      }

      .redPort {
        position: relative;

        .Port {
          display: block;
          position: absolute;
          top: 20px;
          right: 20px;
          width: 12px;
          height: 12px;
          background: red;
          border-radius: 50%;
          z-index: 999;
        }
      }
    }
  }

  .searchFriendBox {
    margin-top: 10px;
    margin-left: 10px;
    width: 320px;
    border-radius: 10px;
    color: #666;
    border: 2px solid #eee;


    .friendBoxSearch {
      display: flex;
      justify-content: center;
    }

    .searchMain {
      margin-top: 5px;
      width: 90%;

      .searchImage {
        top: 8px;
        right: 11px;
      }

      .inputType {
        width: 90%;
      }
    }

    .friendItem {
      margin: 10px 6px;
      justify-content: space-between;
      cursor: pointer;
      border-radius: 10px;

      .ItemLeft {
        display: flex;
        align-items: center;

        .userImg {
          width: 48px;
          height: 48px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }

      .ItemRight {


        z-index: 11;
        width: 80px;
        height: 30px;
        line-height: 30px;

        background: #fc5531;
        border-radius: 23px;
        font-size: 14px;

        color: #fff;
        text-align: center;
      }

      .userName {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500;
      }
    }

    .friendBoxSearchList {
      margin-top: 10px;
      height: 400px;
      overflow-y: scroll;
    }

  }
}
</style>
